﻿@implements IDialogContentComponent

<div>
    <FluentDesignTheme @ref=_theme
                       @bind-Mode="@Mode"
                       @bind-OfficeColor="@OfficeColor"
                       Direction="@Direction"
                       StorageName="theme" />

    <FluentStack Orientation="Orientation.Vertical" VerticalGap="0">
        <FluentSelect Label="选择模式"
                      Width="100%"
                      Style="margin-bottom: 30px;"
                      Items="@AllModes"
                      @bind-SelectedOption="@Mode" >
            <OptionTemplate>
                <FluentStack>
                    <FluentLabel>@DesignThemeModesMapper.Map(context) </FluentLabel>
                </FluentStack>
            </OptionTemplate>
        </FluentSelect>

        <FluentSelect Label="主题颜色"
                      Style="margin-bottom: 30px;"
                      Width="100%"
                      Items="@(OfficeColorUtilities.AllColors.Cast<OfficeColor?>())"
                      Height="200px"
                      @bind-SelectedOption="@OfficeColor">
            <OptionTemplate>
                <FluentStack>
                    <FluentIcon Value="@(new Icons.Filled.Size20.RectangleLandscape())"
                                Color="Color.Custom"
                                CustomColor="@GetCustomColor(@context)" />
                    <FluentLabel>@OfficeColorNameMapper.Map(context) </FluentLabel>
                </FluentStack>
            </OptionTemplate>
        </FluentSelect>

        <FluentSwitch Label="方向"
                      Style="margin-bottom: 30px;"
                      CheckedMessage="从左至右"
                      UncheckedMessage="从右到左"
                      Value="@_ltr"
                      ValueChanged="HandleDirectionChanged" />
        <FluentLabel>
             （方向值除外）将被持久保存在 LocalStorage 中，并将在下次访问时恢复。
            <br /><br />
            <FluentLabel Typo="Typography.Body">  "重置设置" 按钮 重置系统主题和颜色。 </FluentLabel>
            <br />
            <FluentLabel Typo="Typography.Body">  "随机设置" 按钮 随机系统主题和随机颜色。 </FluentLabel>
            
        </FluentLabel>
        <FluentDivider Style="width: 100%; margin: 1rem 0" />
        <FluentPopover Style="width: 350px;" AnchorId="info" FixedPlacement="true" @bind-Open="@_popVisible">
            <Header>重置网站设置</Header>
            <Body>
                <p>
                    该网站会在浏览器缓存和本地存储中存储主题和颜色设置，以及下载的样本、表情符号和图标。
                </p>
                <p>
                    您可以在浏览器的开发工具中检查缓存和存储的内容。如果您使用的是 Edge 或 Chrome 浏览器，可以进入 "应用程序 "选项卡，然后点击 "缓存存储 "或 "本地存储 "部分。
                    <br />
                    在火狐浏览器中，您可以进入 "存储 "选项卡，然后单击 "缓存存储 "或 "本地存储 "部分。
                </p>

                <p>
                    如果你觉得没有看到最新和最好的样本、表情符号或图标，或者你想清除存储的主题和颜色，请单击下面的按钮清除缓存并删除本地存储。
                </p>
                <p>
                    <strong>别担心, 这将<strong>仅</strong>重置<strong>此</strong>网站的存储数据。它不会清除浏览器中其他网站的任何缓存！</strong>
                </p>
            </Body>
        </FluentPopover>

        <FluentStack VerticalAlignment="VerticalAlignment.Center">
            <FluentButton Appearance="Appearance.Outline" OnClick="@RandomSiteAsync">随机主题</FluentButton>
            <FluentButton Appearance="Appearance.Stealth" OnClick="@ResetSiteAsync">重置设置</FluentButton>
            <FluentIcon Id="info" Value="@(new Icons.Regular.Size24.Info())" OnClick="@(() => _popVisible = !_popVisible)" />
        </FluentStack>

        <p style="margin-top: 1rem;">
            <em><strong>@_status</strong></em>
        </p>
    </FluentStack>
</div>
